<!--用户的收货地址页面-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.userId" placeholder="请输入用户id" clearable></el-input>
        </el-form-item>
<!--        <el-form-item prop="addressMark">-->
<!--          <ren-select v-model="dataForm.addressMark" dict-type="addressMark" placeholder="请选择地址别名"></ren-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item prop="isDefault">-->
<!--          <ren-select v-model="dataForm.isDefault" dict-type="is_default" placeholder="请选择默认地址"></ren-select>-->
<!--        </el-form-item>-->
        <el-form-item prop="receiveName">
          <el-input v-model="dataForm.receiveName" placeholder="请输入收货人姓名"></el-input>
        </el-form-item>
        <el-form-item prop="receivePhone">
          <el-input v-model="dataForm.receivePhone" placeholder="请输入收货人电话号码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe highlight-current-row
                @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
                style="width: 100%;">

        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="userId" label="用户id" header-align="center" align="center" width="180">
          <template slot-scope="{}" slot="header">
            <!-- 表头名称 -->
            <span>用户信息</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <i class="el-icon-question" style="font-size:16px;"></i>
              <!-- 悬停提示内容 -->
              <div slot="content">
                <div>点击下方名称查看用户详细信息</div>
              </div>
            </el-tooltip>
          </template>
          <template slot-scope="{row}">
            <div class="flex_columns" @click="showUserList(row['userDTO'])" v-if="row['userDTO']">
              <div class="flex_rows flex_center">
                <el-avatar size="large" :src="row['userDTO']['avatar']"></el-avatar>
                <div class="flex_columns" style="margin-left: 10px;">
                  <div class="flex_rows" style="text-decoration: underline;cursor: pointer;">ID:{{row['userDTO']['id']}}</div>
                  <div class="flex_rows flex_center" style="text-decoration: underline;cursor: pointer;">
                    <div class="ellipsis1" style="max-width: 5em;">
                      {{row['userDTO']['nickname']}}
                    </div>
                    ({{row['userDTO']['identity']}})
                  </div>
                </div>
              </div>
            </div>
            <div v-if="!row['userDTO']">{{row.userId}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="isDefault" label="是否默认" header-align="center" align="center" sortable width="">
          <template slot-scope="{row}">
            <div>{{ $getDictLabel("is_default", row.isDefault)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="addressMark" label="地址别名" header-align="center" align="center" sortable width="">
          <template slot-scope="{row}">
            <div>{{ $getDictLabel("addressMark", row.addressMark)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="receiveName" label="收货人" header-align="center" align="center" width=""></el-table-column>
        <el-table-column prop="receivePhone" label="手机号码" header-align="center" align="center" width=""></el-table-column>
        <el-table-column prop="receiveProvince" label="所在省份" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.receiveProvince" placement="top">
              <div>{{ row.receiveProvince }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="receiveCity" label="所在城市" header-align="center" align="center"width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.receiveCity" placement="top">
              <div>{{ row.receiveCity }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="receiveCounty" label="所在区县" header-align="center" align="center"width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.receiveCounty" placement="top">
              <div>{{ row.receiveCounty }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="receiveAddress" label="详细地址" header-align="center" align="center"width="">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.receiveAddress" placement="top">
              <div class="ellipsis1">{{ row.receiveAddress }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建日期" header-align="center" align="center" width="160"></el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="140">
          <template slot-scope="scope">
            <el-link v-if="$hasPermission('api:userAddress:update')" type="primary"
                       @click="addOrUpdateHandle(scope.row.id)">修改
            </el-link>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
                     layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <!--查看用户信息组件-->
      <com-user-list :visible.sync="showUser" :content="content"></com-user-list>
    </div>

  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './userAddressAddOrUpdate.vue'
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/api/userAddress/page',
        getDataListIsPage: true,
        createdIsNeed:false,
        deleteURL: '/api/userAddress',
        deleteIsBatch: true
      },
      showUser:false,                   //是否显示用户信息
      content:{},                       //用户信息内容
      dataForm: {
        id: '',
        isDefault: '',          //为每个地址项添加一个可选的别名字段，允许用户为地址设置自定义标识，如“家”、“办公室”或“朋友家”
        addressMark: '',        //该地址是否为用户的默认地址
        receiveAddress:'',      //记录详细的街道地址，如门牌号、楼层等
        receiveCity: '',        //记录收货地址所在的城市
        receiveCounty: '',      //记录收货地址所在的区县
        receiveName: '',        //记录收货人的姓名。
        receivePhone: '',       //记录收货人的手机号码
        receiveProvince: '',    //记录收货地址所在的省、州或自治区
        userId: ''              //关联到用户表的ID，用于与用户进行关联，表示该地址属于哪个用户
      },
      timeList:[]               //时间戳数组
    }
  },
  watch: {
    '$route':'getPath'
  },
  components: {
    AddOrUpdate
  },
  created() {

  },
  mounted() {
    if (this.$route.query.userId){
      this.mixinViewModuleOptions.createdIsNeed = false
      this.dataForm.userId = this.timeList.includes(this.$route.query.time)?'': this.$route.query.userId
      this.getDataList()//查询数据
    }else {
      this.mixinViewModuleOptions.createdIsNeed = true
      this.getDataList()//查询数据
    }
    this.timeList.push(this.$route.query.time)
  },
  methods: {
    //监听路由变化
    getPath(){
      if (this.$route.query.userId){
        this.dataForm.userId = this.timeList.includes(this.$route.query.time)?'': this.$route.query.userId
        this.getDataList()//查询数据
      }else {
        this.mixinViewModuleOptions.createdIsNeed = true
        this.dataForm.userId = ''
        this.getDataList()//查询数据
      }
      this.timeList.push(this.$route.query.time)
    },
    //显示用户信息
    showUserList(content){
      this.showUser=true;
      this.content= content;
    },
  }
}
</script>
